const { defineConfig } = require('@vue/cli-service')
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,

  devServer: {
    port: 8080,
    host: '0.0.0.0',
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://10.99.207.21:9000/',
        // target: 'http://12.107.3.133:9000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        },
        secure: false,
        ws: true,
        logLevel: 'debug',
        timeout: 30000,
        onProxyReq: function (proxyReq, req, res) {
          console.log('🚀 代理请求:', req.method, req.url, '->', proxyReq.getHeader('host') + proxyReq.path)
        },
        onProxyRes: function (proxyRes, req, res) {
          console.log('✅ 代理响应:', proxyRes.statusCode, req.url)
        },
        onError: function (err, req, res) {
          console.error('❌ 代理错误:', err.message)
        }
      },

      '/upload': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: false,
        ws: true,
        logLevel: 'debug'
      },

      '/mock': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/mock': '/api'
        }
      }
    }
  },

  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            autoprefixer(),
            pxtorem({
              rootValue: 37.5,
              propList: ['*'],
              selectorBlackList: ['.norem']
            })
          ]
        }
      },
      less: {
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            // 'text-color': '#111',
            // 'border-color': '#eee',
            // '@nav-bar-icon-color': '#000000',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "@/css/index.less";`,
          },
        },
      }
    }
  },

  configureWebpack: {
    resolve: {
      alias: {
        '@': require('path').resolve(__dirname, 'src')
      }
    }
  }
})
